<script setup>

import {blobValidate} from "@/utils/ruoyi.js";
import notImage from '@/assets/images/notImage.jpeg'

const props = defineProps({
  downloadName: {
    type: String,
    default: "下载.jpg"
  },
  queryParams: {
    type: [Number, String, Object],
  },
  getImageApi: {
    type: Function
  }
})
//遮罩透明度
const defaultBackdropOpacity = 0.5
const imageUrl = ref('')

//预览正文第一页内容保存成的图片
function previewImage() {
  props.getImageApi(props.queryParams).then(data => {
    const blob = new Blob([data])
    const isBlob = blobValidate(data)
    if (isBlob) {
      imageUrl.value = URL.createObjectURL(blob)
    } else {
      imageUrl.value = notImage
    }
  })
}

function downloadDocFirstPageImage(item) {
  saveAs(item.src, item.downloadName)
}

</script>

<template>
  <photo-provider :default-backdrop-opacity=defaultBackdropOpacity :download-method="downloadDocFirstPageImage">
    <photo-consumer :download-name="downloadName" :intro="downloadName"
                    :key="imageUrl" :src="imageUrl">
      <el-link @click="previewImage" type="primary" >
        查看
      </el-link>
    </photo-consumer>
  </photo-provider>
</template>